<script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77">
</script>

<template>



  <el-tabs v-model="activeName" type="border-card">
    <el-tab-pane label="基础配置" name="first">
      <div>


        <el-row :gutter=15>
          <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">


            <el-col :span="12">
              <el-form-item label="物业名称" prop="pmid">
                <el-select v-model="formData.pmid" placeholder="请选择物业名称" :disabled='disabled' clearable
                           :style="{width: '100%'}">
                  <el-option v-for="(item, index) in pmidOptions"
                             :label="item.propertyName"
                             :value="item.pmid" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>



            <el-col :span="12">
              <el-form-item label="车场编号" prop="code">
                <el-input v-model="formData.code" placeholder="请输入车场编号" :disabled='disabled' clearable
                          :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车场名称" prop="chname">
                <el-input v-model="formData.chname" placeholder="请输入车场名称" :disabled='disabled' clearable
                          :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">

              <el-form-item label="车场类别" prop="chtid">
                <el-select v-model="formData.chtid" placeholder="请选择车场类别" :disabled='disabled' clearable
                           :style="{width: '100%'}">
                  <el-option
                    v-for="item in this.typeList"
                    :key="item.chtid"
                    :label="item.tname"
                    :value="item.chtid">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>


            <el-col :span="12">
              <el-form-item label="车位总数" prop="allNumber">
                <el-input v-model="formData.allNumber" placeholder="请输入车位总数" :disabled='disabled' clearable
                          :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车位剩余" prop="num">
                <el-input v-model="formData.num" placeholder="请输入车位剩余" :disabled='disabled' clearable
                          :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>


            <el-col :span="12">
              <el-form-item label="支付离场免费时间/分" prop="goTime">
                <el-input v-model="formData.goTime" placeholder="请输入支付离场免费时间/分" show-word-limit
                          :disabled='disabled' clearable :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="充电桩数量" prop="field110">
                <el-input v-model="formData.field110" placeholder="请输入充电桩数量" show-word-limit
                          :disabled='disabled'
                          clearable :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="满车位开闸" prop="info">
                <el-radio-group v-model="formData.info" size="medium" :disabled='disabled'>
                  <el-radio v-for="(item, index) in infoOptions" :label="item.value"
                            :disabled="item.disabled">{{ item.label }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="停车场状态" prop="status">
                <el-radio-group v-model="formData.status" size="medium" :disabled='disabled'>
                  <el-radio v-for="(item, index) in statusOptions" :label="item.value"
                            :disabled="item.disabled">{{ item.label }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="是否免费" prop="free">
                <el-radio-group v-model="formData.free" size="medium" :disabled='disabled'>
                  <el-radio v-for="(item, index) in freeOptions" :label="item.value"
                            :disabled="item.disabled">{{ item.label }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>


            <el-col :span="24">
              <el-form-item size="large">
                <el-button @click="goback()">返回</el-button>
                <el-button type="primary" disabled>保存</el-button>
                <el-button @click="gosecond">下一页</el-button>
              </el-form-item>
            </el-col>


          </el-form>
        </el-row>
      </div>

    </el-tab-pane>


    <!--  ------------------------------------  车场地址--------------------------------------------------------------------->
    <el-tab-pane label="车场地址" name="second">


      <template>
        <div class="container">
          <div class="map">
            <el-input v-model="addressKeyword" placeholder="请输入地址来直接查找相关位置" style="width: 200px;position: absolute;top: 20px;left: 100px;z-index: 999"></el-input>
            <baidu-map class="map" :scroll-wheel-zoom="true" :center="location" :zoom="zoom" @click="getLocationPoint">
              <!--缩放-->
              <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
              <!--定位-->
              <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :show-address-bar="true" :auto-location="true"></bm-geolocation>
              <!--点 标记一下位置-->
              <bm-marker :position="location" :dragging="dragging" animation="BMAP_ANIMATION_DROP">
                <!--提示信息 不需要可以删除-->
                <bm-info-window :show="show">{{ addressInformation }}</bm-info-window>
              </bm-marker>
              <bm-local-search class="search" :keyword="addressKeyword" :auto-viewport="true"></bm-local-search>
            </baidu-map>
          </div>
          <hr class="divider">
        </div>
      </template>

      <div>
        <el-row :gutter=15>
          <el-form ref="elForm" :model="formDataMap" :rules="rules" size="medium" label-width="100px">
            <el-col :span="12">
              <el-form-item label="中心经度" prop="lng">
                <el-input v-model="location.lng" placeholder="请输入中心经度" :maxlength="11" show-word-limit
                          :disabled='true' clearable prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="中心维度" prop="lat">
                <el-input v-model="location.lat" placeholder="请输入中心维度" :disabled='true' clearable
                          :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">

              <el-form-item label="车场地址" prop="address">
                <el-cascader
                  :style="{width: '100%'}"
                  :disabled='disabled'
                  size="large"
                  :options="regionData"
                  v-model="selectedOptions"
                  @change="lookMap">
                </el-cascader>
              </el-form-item>
            </el-col>


            <el-col :span="12">
              <el-form-item label="详细地址" prop="addressxiaogxi">
                <el-input v-model="formDataMap.addressxiaogxi" placeholder="请输入详细地址" :disabled='disabled'
                          clearable
                          :style="{width: '100%'}"
                          @input="getXiangxi"
                    >
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item size="large">

                <el-button @click="goback">返回</el-button>
                <el-button @click="gothird">下一页</el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>


    </el-tab-pane>

    <!--  ------------------------------------  运维人员--------------------------------------------------------------------->
    <el-tab-pane label="运维人员" name="third">

      <div>
        <el-form ref="elForm" :model="formDataOM" :rules="rules" size="medium" label-width="100px">
          <el-row :gutter=15>
          </el-row>
          <el-form-item label="号码1:" prop="telephone">
            <el-input v-model="formDataOM.telephone" placeholder="请输入号码1:" :disabled='disabled' clearable
                      :style="{width: '100%'}">
            </el-input>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input v-model="formDataOM.description" type="textarea" placeholder="请输入描述" :disabled='disabled'
                      :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="goback">返回</el-button>
          </el-form-item>
        </el-form>
      </div>


    </el-tab-pane>
  </el-tabs>
</template>
<script>
import router from "@/router";
import {provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, codeToText, TextToCode}
  from 'element-china-area-data'
import {listType} from "@/api/modules/sys-cars-home/type/type";
import {addHome, getHome, updateHome} from "@/api/modules/sys-cars-home/home";
import {addOm, getOm, updateOm} from "@/api/modules/sys-cars-home/om/om";
import {listProperty} from "@/api/modules/sys-property/property";

export default {

  components: {},
  props: [],


  data() {
    return {
      activeName: 'first',
      // 地图
      location: {
        lng: 113.746298,
        lat: 34.848577
      },
      // location: {
      //   lng: null,
      //   lat: null
      // },
      zoom: 12,
      addressKeyword: "",
      dragging: true,
      show: true,
      addressInformation: "郑州市金水区牛顿国际A座",


      disabled: true,
//地址

      // 初始化省、市、区的名称和行政区划码数组
      provinceName: '',
      cityName: '',
      districtName: '',


      regionData,
      selectedOptions: [],
      test: "",
      //车场地址

      formDataMap: {
        mobile: '',
        lng: null,
        lat: null,
        address: null,
        addressxiaogxi: '',
      },


      // 车场类型表格数据
      typeList: [],
      options: [],


//基础配置 //地址//运维人员
      formData: {
        pmid: null,

        chid: null,
        chname: null,
        allNumber: 100,
        num: 100,
        chtid: null,
        goTime: null,
        field110: 10,
        info: 0,
        status: 1,
        free: 0,
        code: null,
        addr: null,
        addrcode: null,
      },
      rules: {
        pmid: [{
          required: true,
          message: '请选择物业名称',
          trigger: 'change'
        }],
        chid: [{
          required: true,
          message: '请输入车场编号',
          trigger: 'blur'
        }],
        chname: [{
          required: true,
          message: '请输入车场名称',
          trigger: 'blur'
        }],
        allNumber: [{
          required: true,
          message: '请输入车位总数',
          trigger: 'blur'
        }],
        num: [{
          required: true,
          message: '请输入车位剩余',
          trigger: 'blur'
        }],
        chtid: [{
          required: true,
          message: '请输入车场属性',
          trigger: 'blur'
        }],
        goTime: [{
          required: true,
          message: '请输入支付离场时间免费时间/分',
          trigger: 'blur'
        }],
        field110: [{
          required: true,
          message: '请输入充电桩数量',
          trigger: 'blur'
        }],
        info: [{
          required: true,
          message: '满车位开闸不能为空',
          trigger: 'change'
        }],
        status: [{
          required: true,
          message: '停车场状态不能为空',
          trigger: 'change'
        }],
        free: [{
          required: true,
          message: '是否免费不能为空',
          trigger: 'change'
        }],
        telephone: [{
          required: true,
          message: '请输入号码1:',
          trigger: 'blur'
        }],
        description: [{
          required: true,
          message: '请输入描述',
          trigger: 'blur'
        }],

      },
      pmidOptions: [],


      infoOptions: [{
        "label": "否",
        "value": 0
      }, {
        "label": "是",
        "value": 1
      }],
      statusOptions: [{
        "label": "禁用",
        "value": 0
      }, {
        "label": "启用",
        "value": 1
      }],
      freeOptions: [{
        "label": "不免费",
        "value": 0
      }, {
        "label": "免费",
        "value": 1
      }],


      //运维
      formDataOM: {
        code: null,
        codes: null,
        status: null,
        deleted: null,
        createTime: null,
        updateTime: null,
        telephone: null,
        description: null
      },

      message: null,
    };
  },

  computed: {},
  watch: {},


  created() {
    // this.addressInformation = this.$route.query.addr;
    this.listen();
    this.getType();
    this.getListProperty()
// this.getLocationPointByaddr(e);
  },


  mounted() {
  },

  methods: {

    /** 查询物业列表 */
    getListProperty() {
      this.loading = true;
      listProperty(null).then(response => {
        this.pmidOptions = response.rows;

        this.loading = false;
      });
    },

    /** 查询车场类型列表 */
    getType() {
      listType(null).then(response => {
        this.typeList = response.rows;
      });
    },


    listen() {
      //添加操作
      if (this.$route.query.operate === "新增") {
        this.disabled = false;
        this.message = "新增"
      } else if (this.$route.query.operate === "查看") {
        this.message = "查看"
        this.getQuery()
        this.lookMap()
      } else {
        //修改
        this.disabled = false;
        this.message = "修改"
        this.getQuery()
        this.lookMap()
      }
    },


//返回
    goback() {
      this.$store.dispatch('tagsView/delAllViews',this.$router);
      router.push("home")
    },


    gosecond(tab, event) {
      this.activeName = "second"
    },
    gothird() {
      this.activeName = "third"
    },

    handleClick(tab, event) {
      // if (tab._props.label == "基础配置") {
      //   // router.push("edit")
      // }
    },

    //接受路由跳转的对象
    getQuery() {
      this.formData.pmid = parseInt(this.$route.query.pmid)  ;
      this.formData.chid = parseInt(this.$route.query.chid);
      this.formData.code = this.$route.query.code;
      this.formData.chname = this.$route.query.chname;
      this.formData.allNumber = this.$route.query.allNumber;
      this.formData.num = this.$route.query.num;
      this.formData.chtid = parseInt(this.$route.query.chtid);
      this.formData.goTime = this.$route.query.goTime;
      this.formData.info = parseInt(this.$route.query.info);
      this.formData.status = parseInt(this.$route.query.status);
      this.formData.addr = this.$route.query.addr;
      this.formData.free = parseInt(this.$route.query.free);
      //渲染地址
      this.formData.addrcode = this.$route.query.addrcode;
      this.selectedOptions.push(this.formData.addrcode.substring(0, 2));
      this.selectedOptions.push(this.formData.addrcode.substring(0, 4));
      this.selectedOptions.push(this.formData.addrcode);
      this.formDataMap.addressxiaogxi = this.$route.query.addr.replace(codeToText[this.selectedOptions[0]] + codeToText[this.selectedOptions[1]] + codeToText[this.selectedOptions[2]], "")
      //渲染运维
      this.formDataOM.code = this.formData.code;
      this.getom();
    },


    /** 提交按钮 */
    submitForm() {

      // if(this.formData.pid==null || this.formData.addr==null){
      //   console.log("!!!!!!!!!!!!!!!!")
      //   console.log(this.formData)
      //   alert("数据未添加完整!")
      // }
      if(1==0){}
      else {
        //地址组合
        this.formData.addr = codeToText[this.selectedOptions[0]] + codeToText[this.selectedOptions[1]] + codeToText[this.selectedOptions[2]] + this.formDataMap.addressxiaogxi
        this.formData.addrcode = this.selectedOptions[2]
        this.formDataOM.code = this.formData.code
        if (this.message === "新增") {
          //地址组合
          this.formData.addr = codeToText[this.selectedOptions[0]] + codeToText[this.selectedOptions[1]] + codeToText[this.selectedOptions[2]] + this.formDataMap.addressxiaogxi
          this.formData.addrcode = this.selectedOptions[2]
          addOm(this.formDataOM).then(response => {
          })
          addHome(this.formData).then(response => {
            this.$modal.msgSuccess("添加成功!");
            this.goback();
          })
        } else if (this.message === "修改") {
          updateOm(this.formDataOM)
          updateHome(this.formData).then(response => {
            this.$modal.msgSuccess("修改成功!");
            this.goback()
          })
        } else {
        }


      }

    },


    /** 获取OM */
    getom() {
      getOm(this.formDataOM.code).then(response => {
        this.formDataOM = response.data;
      });
    },

    getLocationPoint(e) {
      this.lng = e.point.lng;
      this.lat = e.point.lat;          /* 创建地址解析器的实例 */
      let geoCoder = new BMap.Geocoder();          /* 获取位置对应的坐标 */
      geoCoder.getPoint(this.addressKeyword, point => {
        this.selectedLng = point.lng;
        this.selectedLat = point.lat;
        this.location.lng=point.lng;
        this.location.lat=point.lat;
        console.log(this.location)
      });          /* 利用坐标获取地址的详细信息 */
      geoCoder.getLocation(e.point, res => {
        console.log(res.point)
        console.log(res.point.lat)
        console.log(res.point.lng)
      })
    },


    // getLocationPointByaddr(e) {
    //   this.lng = e.point.lng;
    //   this.lat = e.point.lat;          /* 创建地址解析器的实例 */
    //   let geoCoder = new BMap.Geocoder();          /* 获取位置对应的坐标 */
    //   geoCoder.getPoint(this.addressInformation, point => {
    //     this.location.lng=point.lng;
    //     this.location.lat=point.lat;
    //     console.log(this.location)
    //   });
    // },
    lookMap(){
      this.addressKeyword = codeToText[this.selectedOptions[0]] + codeToText[this.selectedOptions[1]] + codeToText[this.selectedOptions[2]] + this.formDataMap.addressxiaogxi

    },

    getXiangxi(){
      this.lookMap()
    }

  }
}
;
</script>
<style>

.map {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 1300px;
  height: 500px;
  border: 2px solid #ccc;
  box-sizing: border-box;
}

.divider {
  margin-top: 20px; /* 可选：设置分割线与上方元素的间距 */
  margin-bottom: 30px;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.map {
  height: 400px;
}

</style>

